<template>
  <el-container class="main-container">
    <el-aside :width="!collapse ? '200px': '45px'" class="main-aside">
      <el-menu
        :collapse="collapse" 
        :collapse-transition="false"
        background-color="#545c64"
        text-color="#fff"
        :default-active="menuActive"
        :router="true"
        active-text-color="#ffd04b">
        <el-menu-item index="0-0" :route="{path: '/'}">
          <svg-icon icon-class="shouye"></svg-icon>
          <span slot="title">首页</span>
        </el-menu-item>
        <template v-for="menu in menus">
          <submenu :key="menu.menuId" :menu="menu"></submenu>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="main-header" height="45px">
        <hamburger @toggleClick="toggle" :isActive="!collapse"></hamburger>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <template v-for="menu in breadcrumb">
            <el-breadcrumb-item
              :to="{path: menu.url.includes('http') ? `/frame/?url=${menu.url}`  : '/' + menu.url}"
              :key="menu.menuId" 
              v-if="menu.url">
              {{menu.name}}
            </el-breadcrumb-item>
            <el-breadcrumb-item :key="menu.menuId" v-else>{{menu.name}}</el-breadcrumb-item>
          </template>  
        </el-breadcrumb>
        <div class="operate-list">
          <el-dropdown @command="logout">
            <span class="el-dropdown-link">
              超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main class="main-content">
        <tags-view></tags-view>
        <nuxt :keepAlive="true"></nuxt>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
  import hamburger from '~/components/hamburger';
  import submenu from '~/components/layout/Submenu';
  import tagsView from '~/components/layout/TagsView';

  export default {
    components: {hamburger, submenu, tagsView},
    data() {
      return {
        collapse: false
      }
    },
    methods: {
      toggle() {
        this.collapse = !this.collapse;
      },
      goHome() {
        this.$router.push({path: '/'})
      },
      logout (type) {
        console.log(type)
        this.$store.dispatch('logout').then(() => {
          this.$router.push({path: '/login'})
          setTimeout(() => {
            location.reload();
          }, 10);
        })
      }
    },
    mounted() {
      if (sessionStorage.getItem('token')) {
        this.$store.commit('setToken', sessionStorage.getItem('token'));
      }
      if (this.$store.state.token) {
        this.$store.dispatch('getMenus');
      } else {
        this.$router.push({path: '/login'})
      }
    },
    computed: {
      menus () {
        return this.$store.getters.menus;
      },
      menuActive () {
        return this.$store.getters.menuActive;
      },
      breadcrumb () {
        return this.$store.state.breadcrumb;
      }
    }
  };
</script>



<style>
  .main-container {
    height: 100%;
  }
  .main-container .main-header {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #ddd;
    padding-left: 5px;
  }
  .main-container .main-header .el-icon-menu:before {
    width: 20px; height: 20px;
  }
  .main-container .main-header .el-breadcrumb {
    display: inline-block;
    margin-left: 10px;
  }
  .main-container .main-header .operate-list {
    float: right;
  }
  .main-container .main-aside {
    background: #545c64;
  }
  .main-container .main-aside .el-menu {
    border-right: none;
    width: 100%!important;
  }
  .main-aside .el-menu .svg-icon {
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
  }
  .main-aside .el-menu.el-menu--collapse .el-menu-item,
  .main-aside .el-menu.el-menu--collapse .el-tooltip {
    padding-left: 10px!important; 
  }
  .main-aside .el-menu.el-menu--collapse .el-submenu__title {
    padding-left: 10px!important; 
  }
  .main-container .main-content {
    padding: 0;
    height: 100%;
  }
</style>

